<template>
    <div class="line-chart shadow-box">
        <div class="header flex">
            <div class="header-left">
                <p>{{header.title}}</p>
            </div>
            <div class="header-right" v-if="header.router">
                <router-link :to="header.router">{{header.rightText}}&gt;</router-link>
            </div>
        </div>
        <div class="i-m-content" :style="{height: height + 'px'}">
            <div class="chart-box" ref="chartBox"></div>
        </div>
    </div>
</template>

<script>
    import echarts from 'echarts/lib/echarts';
    import 'echarts/lib/component/tooltip';
    import 'echarts/lib/component/title';
    import 'echarts/lib/component/legendScroll';
    import 'echarts/lib/chart/line'; //引入折线图
    export default {
        components: {},
        props: {
            height: {
                type: [String, Number],
                default: 350
            },
            header: {  
                type: Object,
                default(){
                    return {
                        title: '新增维修维护记录数量趋势',   //标题
                        rightText: '统计详情',              //查看详情文字
                        router: '/index'                   //跳转路由
                    }
                },
            },
            valueData: {   //图表数据
                type: Array,
                default(){
                    return [55, 15, 30, 30, 66, 75, 50, 60, 45]
                }
            },
            xData : {   //图表数据
                type: Array,
                default(){
                    return ['2017-12-04', '2017-12-05', '2017-12-06', '2017-12-07', '2017-12-08', '2017-12-09', '2017-12-10']
                }
            },
            markLineData: {
                type: Array,
                default(){
                    let data = this.valueData;
                    // console.log(data)
                    let arr = []
                    for (var i = 1; i < data.length; i++) {
                        arr.push([{
                            xAxis: i - 1,
                            yAxis: data[i - 1],
                            value: (data[i] + data[i-1]).toFixed(2)
                        }, {
                            xAxis: i,
                            yAxis: data[i]
                        }]);
                    }
                    return arr
                }
            }
        },
        data(){
            return {
                echart: null,
                echartOption: null,
                allCount: 0,
                resizeTimer: null
            }
        },
        mounted(){
            this.init()
            window.addEventListener('resize', this.init)
        },
        destroyed(){
            window.removeEventListener('resize', this.init)
        },
        methods: {
            init(){
                clearTimeout(this.resizeTimer);
                this.resizeTimer = setTimeout(() => {
                    if(this.echart) this.echart.dispose();
                    this.echart = echarts.init(this.$refs.chartBox); //初始化图表
                    this.initOption()
                    this.echart.setOption(this.echartOption);
                }, 300);
            },
            initOption(){
                // for(let i=0, l=this.optionData.length; i<l; this.allCount += this.optionData[i++].value);
                this.echartOption = {
                    title: {
                        text: 'Awesome Chart'
                    },
                    tooltip : {
                        trigger: 'axis'
                    }, 
                    xAxis: {
                        data: this.xData
                    },
                    yAxis: {},
                    series: [{
                        type: 'line',
                        data: this.valueData,
                        markPoint: {
                            data: [
                                {type: 'max', name: '最大值'},
                                {type: 'min', name: '最小值'}
                            ]
                        },
                        markLine: {
                            smooth: true,
                                    effect: {
                                        show: true
                                    },
                                    distance: 10,
                            label: {
                                normal: {
                                    position: 'middle'
                                }
                            },
                            symbol: ['none', 'none'],
                            data: this.markLineData
                        }
                    }]
                }
            },
            legendFoematter(name){ //图例
                let data = this.optionData;
                for(let i=0; i<data.length; i++){
                    if(name === data[i].name){
                        let percent = ((data[i].value/this.allCount)*100).toFixed(2) + '%';
                        let text = `{name|${name}}`;
                        text += `{line|\|}`;
                        text += `{percent|${percent}}`;
                        text += `{percent|${data[i].value}}`;
                        return text;
                    }
                }
            }
        }
    }
</script>

<style lang="less" rel="stylesheet/less">
    .line-chart{
        .chart-box{
            height: 100%;
        }
    }
</style>